<template>
  <div class="page-bg">
    <div class="flex">
      <!-- 多图上传组件 -->
      <upImg @img="getList()" />

      <!-- 图片裁剪组件 -->
      <cropper-img @img="getList()" />
    </div>
    <div class="flex c5">
      <el-tooltip
        v-for="(v, i) in pageData.list"
        :key="i"
        class="box-item"
        effect="dark"
        :content="v.key"
        placement="bottom-start"
      >
        <div class="c6">
          <el-image
            :src="config.serverImg + v.key"
            fit="scale-down"
            lazy
            style="width: 100%; height: 100%"
          >
          </el-image>
          <div class="c8 line-1">{{ v.label }}</div>
          <div class="c7 flex">
            <div @click="copyFn(config.serverImg + v.key)">复制</div>
            <el-popconfirm title="确定删除？" @confirm="delImg(v, i)">
              <template #reference>
                <div>删除</div>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </el-tooltip>
    </div>
    <el-pagination
      background
      @current-change="getList()"
      v-model:currentPage="pageData.page"
      :default-page-size="pageData.limit"
      layout="total,prev, pager, next"
      :total="pageData.total"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import config from "@/common/config";
import { post } from "@/common/http";
import { ElMessage } from "element-plus";
import { cropperImg, upImg } from "@/components/upImg";
import { copy } from "@/common/tool";

//复制文本
async function copyFn(value: string) {
  copy(value).then(() => {
    ElMessage({
      message: "已复制：" + value,
      type: "success",
    });
  });
}

interface pData {
  total: number;
  page: number;
  limit: number;
  list: Array<{ key: string; label: string }>;
}

// 页面数据
const pageData = reactive<pData>({
  list: [], //列表
  total: 0,
  page: 1,
  limit: 40,
});

//获取列表
function getList() {
  post("api/Img/get_list", {
    prefix: "local",
    limit: pageData.limit,
    page: pageData.page,
  }).then((res) => {
    pageData.total = res.total ?? 0;
    pageData.list = res.data.list.map((v: any) => {
      return {
        ...v,
        label:
          v.key.length > 15 ? "..." + v.key.slice(v.key.length - 15) : v.key,
      };
    });
  });
}
getList();

//删除文件
const delImg = (v: any, index: number) => {
  post("api/img/del_server_img", {
    path: v.key,
    id: v.id,
  }).then((res) => {
    pageData.list.splice(index, 1);
    if (res.code == 200) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    } else {
      ElMessage({
        message: res.msg,
        type: "error",
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.c5 {
  flex-wrap: wrap;
  width: calc(100% + 20px);
  margin-left: -5px;
}
.c6 {
  width: 150px;
  height: 150px;
  border: 1px solid #f1f1f1;
  margin: 10px;
  position: relative;
  background: #f1f1f1;
}
.c6:hover {
  border-color: var(--el-color-primary);
  cursor: pointer;
  .c7 {
    opacity: 1;
  }
}
.c7 {
  width: 100%;
  height: 25px;
  background: var(--el-color-primary-light-2);
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  font-size: 13px;
  line-height: 25px;
  opacity: 0;
  transition: 0.3s;
  justify-content: space-between;
  div {
    width: 50%;
  }
}
.c8 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #f1f1f1;
  background: rgba(0, 0, 0, 0.3);
  padding: 5px;
}
@media screen and (max-width: 1600px) {
  .c6 {
    width: 100px;
    height: 100px;
  }
}
</style>
